<template>
    <div class="wrapper">
        <div class="repair-form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <div class="form-header">
                    <h2>智慧校园维修报修单</h2>
                    <p>填写下列表单，我们会尽快为您处理问题</p>
                </div>
                <el-form-item label="故障名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="宿舍楼" prop="floor">
                            <el-select v-model="ruleForm.floor" placeholder="请选择宿舍区域">
                                <el-option label="一号楼" value="1"></el-option>
                                <el-option label="二号楼" value="2"></el-option>
                                <el-option label="三号楼" value="3"></el-option>
                                <el-option label="四号楼" value="4"></el-option>
                                <el-option label="五号楼" value="5"></el-option>
                                <el-option label="六号楼" value="6"></el-option>
                                <el-option label="七号楼" value="7"></el-option>
                                <el-option label="八号楼" value="8"></el-option>
                                <el-option label="九号楼" value="9"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="宿舍号" prop="address">
                            <el-input v-model="ruleForm.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>

                <el-form-item label="期望上门" required>
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date"
                                    style="width: 100%;"></el-date-picker>
                </el-form-item>

                <el-form-item label="故障简介" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc" :rows="4"></el-input>
                </el-form-item>

                <div class="form-footer">
                    <!-- <el-form-item> -->
                    <el-button type="primary" @click="submitForm('ruleForm')" round plain>立即报修</el-button>
                    <el-button type="primary" @click="resetForm('ruleForm')" round plain>重置</el-button>
                    <!-- <el-button type="primary" @click="submitForm('ruleForm')" round>立即报修</el-button>
                    <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button> -->
                    <!-- </el-form-item> -->
                </div>
            </el-form>
        </div>
    </div>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import { request } from "@/axios/request";
export default {
    data() {
        return {
            ruleForm: {
                name: "",
                address: "",
                floor: "",
                phone: "",
                date: "",
                desc: "",
            },
            rules: {
                name: [
                    { required: true, message: "请输入故障名称", trigger: "blur" },
                    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
                ],
                floor: [{ required: true, message: "请选择宿舍区域", trigger: "change" }],
                date: [
                    { type: "date", required: true, message: "请选择日期", trigger: "change" },
                ],
                phone: [
                    { required: true, message: "请输入手机号！", trigger: "blur" },
                    { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" },
                ],
                address: [{ required: true, message: "请输入宿舍号", trigger: "change" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    request({
                        url: "/malfunction",
                        data: this.ruleForm,
                        method: "post",
                    })
                        .then((res) => {
                            this.$message({
                                message: res.data.msg,
                                type: "success",
                            });
                            this.resetForm(formName);
                        })
                        .catch((error) => {
                            this.$message({
                                message: error.response.data.msg,
                                type: "error",
                            });
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style scoped>
.repair-form {
    margin: 0 auto;
    max-width: 800px;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 2px 2px 20px #e5e5e5;

}
.wrapper {
    background-image: url(../../static/image/9933.jpg);
    background-size: cover;
    background-position: center center;
}
.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h2 {
    font-size: 30px;
    color: #333;
    margin-bottom: 20px;
}

.form-header p {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}

.el-form-item__label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.el-form-item {
    margin-bottom: 30px;
}

.el-select-dropdown {
    border-radius: 10px;
}

.el-input__inner {
    border-radius: 10px;
}

.el-date-editor {
    border-radius: 10px !important;
}

.el-textarea__inner {
    border-radius: 10px;
}

/* .el-button {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(101, 141, 243);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease-in-out;
} */

.el-button:hover {
    background-color: rgb(55, 100, 205);
}

.el-button:first-child {
    margin-right: 20px;
}

.form-footer {
    text-align: center;
}
</style>
